<template>
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="() => { $router.push('/') }" fixed />
    <div style="height: 45px;"></div>
    <van-empty v-if="!cartData.length" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
        image-size="80" description="购物车空空" />
    <div v-for="item in cartData" v-else>
        <van-swipe-cell>
            <van-card :price="item.goods.goods_price" :title="item.goods.goods_name">
                <template #thumb>
                    <div style="display: flex;">
                        <van-checkbox v-model="item.checked"></van-checkbox>
                        <img :src="item.goods.goods_big_logo ? item.goods.goods_big_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                            style="width: 70px;height: 70px;" alt="">
                    </div>
                </template>
                <template #num>
                    <van-stepper v-model="item.number" theme="round" button-size="22" disable-input />
                </template>
            </van-card>
            <template #right>
                <van-button square text="删除" type="danger" class="delete-button" @click="delcart(item.id)" />
            </template>
        </van-swipe-cell>
    </div>
    <van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checkedall">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
        </template>
    </van-submit-bar>
</template>

<script setup>
import { computed, ref } from 'vue'
import { useCounterStore } from '@/stores/cart'
// 在组件内部的任何地方均可以访问变量 `store` ✨
const store = useCounterStore()
let cartData = ref([]);
const cart = () => {
    cartData.value = store.carts
}
cart();
const delcart = (id) => {
    store.carts = store.carts.filter(item => item.id != id)
    cart()
}
</script>

<style lang="scss" scoped></style>